<template>
	<view class="bookrack">
		<view class="bookrack-box" v-if="isnot">
			<block v-for="(i,ind) in arr" :key="ind" >
				<view class="bookrack-item" @click="switchDetail(i.book_id,i.title)" @longtap="longtap(i.book_id,i.title)">
					<view class="book-img">
						<image :src="i.bookimg" mode=""></image>
					</view>
					<view class="book-title">
						{{i.title}}
					</view>
				</view>
			</block>
			<view class="bookrack-item" >
				<view class="book-img">
				</view>
				<view class="book-title">
				</view>
			</view>
			
		</view>
		<view class="bookreck-box kong" v-if="isnot==false">
			<image src="../../static/kong1.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arr:[],
				isnot:false
			}
		},
		onShow() {
			let key=uni.getStorageSync("key")
			if(key.length!=0){
				uniCloud.callFunction({
					name:"where_bookshelf",
					data:{
						user_id:key
					},
					success:res=>{
						console.log(res.result.data);
						if(res.result.data.length!=0){
							this.arr=res.result.data
							this.isnot=true
						}else{
							this.isnot=false
						}
					}
				})
			}
		},
		methods: {
			switchDetail(bookid,title){
				uni.navigateTo({
					url:`../detail/detail?id=${bookid}&title=${title}`
				})
			},
			longtap(book_id,title){
				let user_id=uni.getStorageSync("key")
				console.log(book_id);
				uni.showModal({
					mask:true,
					title:title,
					content: '确定删除？',
					cancelText: "取消", 
					confirmText: "确认",
					success: (res) => {
					if(res.confirm) {
					// console.log('确定') 
					// console.log(book_id,user_id);
					uniCloud.callFunction({
						name:"del_bookshelf",
						data:{
							user_id,
							book_id
						},
						success:res=>{
							uniCloud.callFunction({
								name:"where_bookshelf",
								data:{
									user_id
								},
								success:res=>{
									console.log(res.result.data);
									if(res.result.data.length!=0){
										this.arr=res.result.data
										this.isnot=true
									}else{
										this.isnot=false
									}
									
								}
							})
						}
					})
					} else {
					// console.log('取消') 
					}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.bookrack{
	.kong{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100vw;
		height: 80vh;
	}
	.bookrack-box{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 40rpx;
	}
	.bookrack-item{
		width: 100px;
		margin: 10px 0;
		.book-img{
			width: 100%;
			height: 130px;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.book-title{
			margin: 2px;
			display: -webkit-box;
			overflow: hidden;
			-webkit-box-orient: vertical;
			line-clamp: 2;
			-webkit-line-clamp: 2;
		}
	}
}
</style>
